<template>
	<view class="contents" style="padding-left:0;padding-right: 0;">
		<view class="tx_box">
			
			<image :src="avatar" mode="aspectFill" class="tx"></image>
			<view class="names_box">
				<view class="titles">{{userInfo.nickName}}</view>
				<!-- <view class="sub_title">剩余次数:{{userInfo.expirationTime}}次</view> -->
			</view>
		</view>
		<view class="mini_box">
			<view class="lists">
				<u-cell-group :border="false">
					<u-cell :border="false" iconStyle="color:#999999" titleStyle="color:#ffffff" @click="click" v-for="(item,index) in baseList" color="#f5f5f5" :name="item.title" :key="index" :icon="item.name"
						:title="item.title" :isLink="false">
						<u-icon slot="right-icon" color="#f5f5f5" name="arrow-right"></u-icon>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<u-modal :show="show" :title="'提示'" :content="'确定退出登录吗？'" :show-cancel-button="true" @confirm="ok"
			@cancel="cancel"></u-modal>
			<view class="bottoms">
				<view class="items_nav" @click="goHome">
					<image src="../../static/menu1.png" mode="aspectFill" style="width: 44upx;height: 44upx;"></image>
				</view>
				<view class="items_nav active" @click="goMine">
					<image src="../../static/mine.png" mode="aspectFill" style="width: 44upx;height: 44upx;"></image>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				userInfo: {},
				avatar: '',
				content:'',
				shownotice:false,
				baseList: [{
						name: 'photo',
						title: '更换头像'
					},
					{
						name: 'lock',
						title: '修改密码'
					},
					{
						name: 'integral',
						title: '退出登录'
					},
				],
				baseLists: []
			};
		},
		mounted() {
			console.log(111111)
			console.log(uni.getStorageSync('userInfo'))
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.getData()
			this.getAvatar()
		},
		methods: {
			signOpen(){
				uni.navigateTo({
					url:'/pages/sign/sign'
				})
			},
			goHome(){
				uni.reLaunch({
					url:'/pages/home/home'
				})
			},
			goMine(){
				uni.reLaunch({
					url:'/pages/mine/mine'
				})
			},
			gotoPage(index) {
				console.log(index)
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/pay/pay'
					})
				}else if(index == 1){
					uni.navigateTo({
						url: '/pages/product/product'
					})
				} else{
					uni.navigateTo({
						url: '/pages/order/order'
					})
				}
			},
			openNotice(){
				this.content = uni.getStorageSync('notice')
				// this.shownotice = true
				uni.navigateTo({
					url:'/pages/notice/notice'
				})
			},
			getData() {
				this.https('/client/recharge', {}).then(res => {
					if (res.status == 200) {
						if (res.data.payType == 1) {
							this.baseLists[0].isshow = true
							this.baseLists[1].isshow = false
						} else {
							this.baseLists[0].isshow = false
							this.baseLists[1].isshow = true
						}
					}
				})
			},
			getAvatar() {
				// this.https('/api//', {
				// 	sendType: 1
				// }).then(res => {
				// 	this.avatar = res.data.avatar
				// })
				this.avatar = this.userInfo.avatar
				console.log(this.userInfo)
			},
			click(name) {
				switch (name.name) {
					case '更换头像':
						this.changePhoto()
						break;
					case '修改密码':
						uni.navigateTo({
							url: '/pages/changePwd/changePwd'
						})
						break;
						case '签到记录':
							uni.navigateTo({
								url: '/pages/sign/sign'
							})
							break;
					case '退出登录':
						this.show = true
						break;
				}
			},
			changePhoto() {
				uni.chooseImage({

					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.baseUrl + '/system/user/profile/avatar', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'avatarfile',
							header: {
								authorization: 'Bearer '+uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								console.log('上传返回值：',uploadFileRes)
								if (uploadFileRes.statusCode == 200) {
									uni.showToast({
										title: '更换成功！',
										icon: 'success'
									})
									this.userInfo.avatar = JSON.parse(uploadFileRes.data).imgUrl
									uni.setStorageSync('userInfo',JSON.stringify(this.userInfo))
									this.getAvatar()
								}else{
									uni.showToast({
										title: '更换失败！',
										icon: 'error'
									})
								}
							}
						});
					}
				});
			},
			ok() {
				this.show = false
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},

			cancel() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.bottoms{
		width: 240upx;
		height: 80upx;
		border-radius: 40upx;
		position: fixed;
		bottom: 100upx;
		left: 230upx;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #111111;
		overflow: hidden;
		.items_nav{
			width: 120upx;
			display: flex;
			justify-content: center;
			height: 80upx;
			align-items: center;
		}
		.active{
			background: #333333;
		}
	}
	.tx_box {
		background: url('../../static/mjicon.jpg') no-repeat;
		background-size: 100% 100%;
		padding-top: 60upx;
		display: flex;
		height: 400upx;
		width: 750upx;
		margin-top: -30upx;
		justify-content: space-between;
		// flex-flow: column;
		align-items: center;
		flex-grow: 1;
		position: relative;

		.setting {
			position: absolute;
			right: 40upx;
			top: 60upx;
			width: 150upx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.tx {
			width: 180upx;
			height: 180upx;
			border-radius: 120upx;
			border: 2upx solid #ffffff;
			margin-left: 50upx;
			margin-right: 40upx;
		}

		.names_box {
			margin-top: 10upx;
			width: 400upx;
			.titles {
				font-size: 50upx;

				font-weight: bold;
				color: #ffffff;
				margin-bottom: 15upx;
			}

			.sub_title {

				color: #d9d9d9;
				font-size: 28upx;
			}
		}

	}

	.mini_box {
		padding: 30upx;
		.grid_box{
			width: 700upx;
			height: 150upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.grid{
				width: 330upx;
				height: 150upx;
				margin: 10upx;
				display: flex;
				justify-content: center;
				align-items: center;
				// flex-flow: column;
				border-radius: 30upx;
				background: linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186));
			}
		}
		.lists {
			margin-top: 50upx;
		}
	}
</style>